<%@ page language="java" pageEncoding="UTF-8" %>
<%@ include file="/page/share/taglib.jsp" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<% String adminName = request.getParameter("adminName");%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <base href="<%=basePath%>">
    <title>用户互动</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">

    <link type="text/css" rel="stylesheet" href="css/evaluate.css">
    <link type="text/css" rel="stylesheet" href="css/smartmenu.css">
    <link rel="stylesheet" type="text/css" href="css/jRating.jquery.css" media="screen"/>

    <script type="text/javascript" src="jslib/index/jquery-1.3.2.min.js"></script>


    <script type="text/javascript" src="<%=basePath%>/jslib/jquery.js"></script>
    <script type="text/javascript" src="<%=basePath%>/jslib/evaluate/jRating.jquery.js"></script>
    <script type="text/javascript" src="<%=basePath%>/jslib/audiojs/audio.min.js"></script>
    <script type="text/javascript">


        $(document).ready(function () {
            $("#myComment").hide();
            var song = document.getElementById("mymusic").getAttribute("value");
            var song2 = "<%=basePath%>" + song;
            document.getElementById("music")
                    .setAttribute("src", song2);
            //为歌曲评分
            jQuery(".exemple5").jRating({
                length:5,
                decimalLength:0,
                onSuccess:function (myId, score) {
                    document.getElementById("evaluateId")
                            .setAttribute("value", myId);
                    $("#myComment").show();
                    $("#notice").html("投票成功! 你评价的分数是:" + score);
                },
                onError:function () {
                    alert('投票失败,请重试');
                }
            });
        });
        //初始化播放器
        audiojs.events.ready(function () {
            var as = audiojs.createAll();
        });
        //评论歌曲
        function evaluateSong() {
            var myEvaluateId = document.getElementById("evaluateId").getAttribute("value");
            var comment = encodeURI(encodeURI($("#myComment").val()));
            if (myEvaluateId == "") {
                $("#comment_success").html("请先评分哦!");
            } else if (comment == "") {
                $("#comment_success").html("请填写评论!");
            } else {
                var url = "EvaluateAjax!addEvaluate.action";
                url = convertURL(url);
                $.ajax({
                    type:"post",
                    url:url,
                    data:"myEvaluateId=" + myEvaluateId + "&comment=" + comment,
                    dataType:"text",
                    success:function (data) {
                        $("#comment_success").html("评论成功");
                        $("#myComment").hide();
                    },
                    error:function (data) {
                        $("#comment_success").html("评论失败,请刷新重试");
                    }
                });
            }
        }
        jQuery(window).ready(function () {
            jQuery("#navigation").Smartmenu({animationDuration:350});
        });
        SyntaxHighlighter.all();
    </script>


</head>

<body id="demopage">
<%@ include file="/page/share/menu.jsp" %>

<div id="cont">
    <div id="one">
        <input type="hidden" value="${musicFile.fileDir}" id="mymusic"/>
        <input type="hidden" value="${musicFile.id}" id="musicId"/>
        <input type="hidden" value="" id="evaluateId"/>
        <table id="first">
            <tr>
                <td>
                    ${musicFile.fileName}
                </td>
            </tr>
            <tr>
                <td>
                    用户:${musicFile.author.userName}
                </td>
            </tr>
            <tr>
                <td>
                    <audio src="" preload="auto" id="music"></audio>
                </td>
            </tr>
            <tr>
                <td>
                    描述:${musicFile.description}
                </td>
            </tr>
            <tr>
                <td>
                    <p>请评分:</p>

                    <div class="exemple">
                        <div class="exemple5" id="10_5"></div>
                    </div>
                    <div class="notice" id="notice"></div>
                </td>
            </tr>

        </table>


        <table id="myTable">
            <thead>
            <tr><p>评分后,这里可以留下你的评论哦:</p></tr>
            <tr>
                <label>
                    <p><textarea name="content" rows="2" cols="30" style="resize: none;" id="myComment"
                                 onpropertychange="if(this.scrollHeight>30) this.style.posHeight=this.scrollHeight+5"></textarea>
                    </p>
                </label>
            </tr>
            <tr>
                <input type="button" value="提交评论" onclick="evaluateSong()" id="stb"/>
            </tr>
            <tr>
                <div id="comment_success"></div>
            </tr>
            </thead>
        </table>
    </div>

    <div id="two">
        <table>
            <thead>
            <p>评论列表:</p>
            <s:iterator value="evaluates" var="evaluate">
                <tr>
                    <td><s:property value="#evaluate.user.userName"/></td>
                    <td>:</td>
                    <td><s:property value="#evaluate.evaluate"/></td>
                </tr>
            </s:iterator>
            </thead>
        </table>


        <table align="center" border="1" id="nima" cellspacing="0">
            <thead align="center">
            <tr>
                <td>序号</td>
                <td>歌曲名</td>
                <td>描述</td>
                <td>上传日期</td>
                <td>用户</td>
            </tr>
            <s:iterator value="fileUtils" var="file" status="f">
                <tr>
                    <td>
                        <s:property value="#f.index+1"/>
                    </td>
                    <td>
                        <a href="Evaluate.action?fileId=<s:property value='#file.id'/>">
                            <s:property value="#file.fileName"/></a>
                    </td>
                    <td><s:property value="#file.description"/></td>
                    <td><fmt:formatDate value="${file.date}" pattern="yyyy-MM-dd"/></td>
                    <td><s:property value="#file.author.userName"/></td>
                </tr>
            </s:iterator>
            </thead>
        </table>
    </div>
</div>
<div id="bottom"></div>
</body>
</html>
